<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/24 0024
  Time: 14:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--360浏览器优先以webkit内核解析-->


    <title> - 主页示例</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 100%;height:700px;"></div>

    <script type="text/javascript">

        var result = [];

        /**
         * 访问后端Controller
         * 已知地址
         * 已知参数
         * msg就是Controller最后return的结果
         * msg就是一个json数据，读取回来之后，可以按照我们的需求进行正产操作处理。
         */
        $.ajax({
            type: "POST",
            url: "${pageContext.request.contextPath}/PatientController/getProSta",
            async: false,
            success: function(msg){
                result = msg;
            }
        });





        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        myChart.showLoading();

        $.get("json/zhongguo.json", function (geoJson) {

            myChart.hideLoading();

            echarts.registerMap('HK', geoJson);

            myChart.setOption(option = {

                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (p / km2)'
                },
                toolbox: {
                    show: true,
                    orient: 'vertical',
                    left: 'right',
                    top: 'center',
                    feature: {
                        dataView: {readOnly: false},
                        restore: {},
                        saveAsImage: {}
                    }
                },
                visualMap: {
                    min: 800,
                    max: 50000,
                    text: ['High', 'Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['lightskyblue', 'yellow', 'orangered']
                    }
                },
                series: [
                    {
                        name: '香港18区人口密度',
                        type: 'map',
                        mapType: 'HK', // 自定义扩展图表类型
                        label: {
                            show: true
                        },
                        data: result,

                    }
                ]
            });
        });


    </script>

</div>
</body>
</html>
